<%-- 
    Document   : indexPage
    Created on : 21.6.2013, 10.32.20
    Author     : vasilenko
--%>

<%@page contentType="text/html" pageEncoding="windows-1251"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <script type="text/javascript" src="<c:url value="/resources/js/jquery-2.0.2.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/resources/js/jquery.json-2.4.js"/>"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $("${categorySelector} #divContainer").sortable({
                        connectWith: ".connectedSortable", distance: 20
                    }).disableSelection();
                });
            });
            function Category() {
                this.categoryName;
                this.categoryItems = [];
            }
            function cancel() {
                $("${categorySelector} #divContainer").sortable("cancel");
                return false;
            }
            function sendData() {
                var categories = [];
                try {
                    $('div[categorytag="true"]').each(function() {
                        var current = $(this);
                        var category = new Category();
                        var name = current.attr("categoryName");
                        category.categoryName = name;
                        current.find('div[itemtag="true"]').each(function() {
                            category.categoryItems.push($(this).attr('itemName'));
                        });
                        categories.push(category);
                    });

                    var json = $.toJSON(categories);
                    sendFromAjax(json);
                } catch (e) {
                    alert(e);
                }
                return false;
            }
            function sendFromAjax(data){
                $.ajax({
                    dataType: 'json',
                    type: 'post',
                    url: '<c:url value="/index/addCommpletedStudy" />',
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    traditional: true,
                    success: function(){alert('send');},
                    error: function(){alert('error');},
                });
            }
        </script>

        <style type="text/css">

            #divHeader{
                margin: 20px 0px 0px 0px;
                padding-left: 30px;
                font-size: 18pt;
                font-weight: bold;
                padding-left: 30px;
                border-bottom: 1px solid black;
                width: 500px;
            }
            #spanHeader{
                margin: 0px 0px 0px 20px;
                padding-left: 30px;
                font-size: 12pt;
                font-weight: bold;
                padding-left: 30px;
                float: right;
            }

            .fill_div{
                margin: 0px 20px 0px 20px;
                padding: 15px 10px 15px 10px;
            }
            .fill{		
                border:1px solid black;
            }
            #divContainer{
                cursor:pointer;
                border: 1px solid black;
                padding: 10px 10px 10px 10px;
                margin: 0px 20px 0px 0px;
            }
            .divCategory{
                border: 1px solid black;
                padding: 5px;
            }
            .stub{
                height:25px;
            }

        </style>
        <title>Add websort</title>
    </head>
    <body>
        <div id="divHeader">Sort ${unsortedStudy.study.name}!
            <span id="spanHeader">
                <a href="" onClick="cancel()">cancel</a>&nbsp;
                <a href="javascript:sendData()">send</a>
            </span>
        </div>
        <div class="fill_div" id="divField" >
            <div style="width:250px; float: left;">
                <div id="divContainer">
                    <c:forEach var="item" items="${unsortedStudy.items}">
                        <div itemName="${item.id}" style="height: 25px; cursor: pointer" itemtag="true">${item.name}</div>
                    </c:forEach>			
                </div>
            </div>
            <div style="width:250px; float: left; margin-left: 20px; margin-right: 10px;" >
                <c:forEach var="category" items="${unsortedStudy.categories}" varStatus="status">
                    Category name: ${category.name}
                    <div id="divCategory${category.id}" class="connectedSortable fill divCategory" categorytag="true" categoryName="${category.id}">
                        <div class="stub"></div>
                    </div>
                    <c:if test="${status.count == unsortedStudy.categories.size()/2}">
                        </div>
                        <div style="width:250px; float: left; margin-left: 20px; margin-right: 10px;" >
                    </c:if>
                </c:forEach>
            </div>
            
        </div>
        <div style="clear:both;">
        </div>
    </body>
</html>
